<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>个人中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name=”apple-mobile-web-app-status-bar-style” content=”default”/>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”/>
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link href="${s.base}/pc/css/swiper.min.css" rel="stylesheet">
    <link href="${s.base}/pc/css/weWeb.css" rel="stylesheet"/>
    <link href="${s.base}/pc/css/cjtx.css" rel="stylesheet" />
</head>
<style type="text/css">
    body, html {
        background: #f5f5f5;
    }

    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        display: inline-block;
        border-radius: 3px;
        background: #B9D5FF;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        background: #549AFF;
        width: 16px;
        height: 6px;
        opacity: 1;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        top: -20px;
        right: 0;
        text-align: right;
    }

    .swiper-pagination {
        right: 15px;
        top: 15px;
        position: absolute;
    }

    .swiper-pagination span {
        margin-right: 4px;
    }
</style>
<body>
<!-- 头像更换开始 -->
<div class="cytx-tc" style="display: none">
    <div class="cytc-nei">
        <div class="avatar-ct">
            <div class="container">
                <div class="imageBox">
                    <div class="thumbBox"></div>
                    <div class="spinner" style="display: none">Loading...</div>
                </div>
                <div class="action">
                    <div class="new-contentarea" style="text-align: center">
                        <a href="javascript:void(0)" class="upload-img">
                            <label for="upload-file">上传图像</label>
                        </a>
                        <input type="file" class="" name="upload-file" id="upload-file"/>
                    </div>
                    <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
                    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
                    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
                </div>
                <div class="cropped"></div>
            </div>
            <div class="div-line-btn">
                <button type="button" class="editbtn" id="editBtnUpload">确定</button>
                <button type="button" class="cancelbtn" id="cancel-cj">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- 头像更换结束 -->
<div style="background:#fff;">
    <div class="w1200 we-head clearfix">
        <div class="we-head-logo"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.logoPath}"></div>
        <div class="we-head-nav">
            <ul>
                <li onclick="goFistPage()">首页</li>
                <li onclick="goCaseListPage()">案例</li>
                <li onclick="goProductListPage()">应用中心</li>
                <li onclick="goAboutUsPage()">关于我们</li>
                <#if sysUser?? >
                <li onclick="goMyIndexPage()" class="checked">控制中心</li>
                </#if>
            </ul>
        </div>
        <div class="we-head-logined">
            <div class="user-updown ellipsis"><i class="cytfonts">&#xe6a2;</i></div>
            <div class="user-name ellipsis">${sysUser.name}</div>
            <div class="user-Avatar"><img src="/sysFile/showFileByObjectId?objectId=${sysUser.headLogo}"></div>
            <div class="user-txt-list" style="display:none;">
                <ul>
                    <li>个人中心</li>
                    <li>退出</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="w1200 mart15 clearfix">
    <div class="main-left">
        <div class="peo-detail">
            <!-- 三角形开始 -->
            <div class="windmill">
                <div class="circle"></div>
                <div class="square">
                    <div class="sanjiao"></div>
                    <div class="sanjiao"></div>
                    <div class="sanjiao"></div>
                </div>
            </div>
            <!-- 三角形结束 -->
            <div class="peo-detail-name ellipsis">${sysUser.name}</div>
            <div class="peo-detail-list ellipsis2">
                <span>手机号：<span>${sysUser.phone}</span></span>
                <span>应用数量：${wxApplyList?size}</span>
            </div>
            <div class="peo-detail-line">争取摘到月亮，因为即使你坠落也会落在群星之间</div>
            <div class="peo-detail-pic"><img src="${s.base}/pc/images/gzh.jpg"></div>
            <div class="peo-detail-pic-bot"></div>
        </div>
        <div class="peo-notice">
            <div class="peo-notice-left">
                <i class="cytfonts">&#xe70e;</i><span>系统公告</span>
            </div>
            <div class="peo-notice-mid">
                <marquee direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()">
                    <ul>
                        <#if sysNoticeVoList?? && (sysNoticeVoList?size>0)>
                        <#list sysNoticeVoList as p>
                        <li id="${p.id}">${p.title}</li>
                        </#list>
                        <#else>
                        <li>暂无公告</li>
                        </#if>
                    </ul>
                </marquee>
            </div>
            <div class="peo-notice-right" onclick="window.open('/web/noticeList','_self')">查看更多>></div>
        </div>
        <div class="peoData-ctn clearfix">
            <div class="peoData-left">
                <div class="peo-Avatar">
                    <#if sysUser.headLogo != null && sysUser.headLogo != ''>
                    <img src="/sysFile/showFileByObjectId?objectId=${sysUser.headLogo}">
                    <#else>
                    <img src="${s.base}/pc/images/app-wgw.png">
                    </#if>
                </div>
                <div class="editData-btn">更换头像</div>
                <div class="peo-data-list">
                    <ul>
                        <li>用户名：<span>${sysUser.name}</span></li>
                        <li>手机号：<span>${sysUser.phone}</span></li>
                    </ul>
                </div>
            </div>
            <div class="peoData-right">
                <div class="peoData-right-tit">资料更改</div>
                <form>
                    <div class="div-line-input">
                        <label>用户名：</label><input type="text" id="name" placeholder="请输入用户名" value="${sysUser.name}" maxlength="18" autocomplete="off"/>
                    </div>
                    <div class="div-line-input">
                        <label>手机号：</label><input type="tel" id="phone" placeholder="请输入手机号" value="${sysUser.phone}" maxlength="11" autocomplete="off"/>
                    </div>
                    <div class="div-line-btn">
                        <button type="button" class="editbtn" id="editbtn">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="main-right">
        <#list sysDictContentList as sysDictContent>
        <div class="ad-list">
            <div class="swiper-pagination"></div>
            <h1 class="ellipsis">${sysDictContent.name}</h1>
            <div class="ad-banner">
                <!-- Swiper -->
                <div class="swiper-container" id="swiper1">
                    <div class="swiper-wrapper">
                        <#list websiteAdvertisementList as websiteAdvertisement>
                        <#if websiteAdvertisement.type == sysDictContent.value>
                        <div class="swiper-slide" onclick="goAdvertisementUrl('${websiteAdvertisement.url}','${websiteAdvertisement.id}')">
                            <div class="ad-banner">
                                <div class="ad-pics" style="background: url(/sysFile/showFileByPath?path=${websiteAdvertisement.path}) top center no-repeat;background-size:cover;"></div>
                                <h2 class="ellipsis">${websiteAdvertisement.title}</h2>
                                <h3 class="ellipsis">${websiteAdvertisement.description}</h3>
                            </div>
                        </div>
                        </#if>
                        </#list>
                    </div>
                </div>
            </div>
        </div>
        </#list>
    </div>
</div>
</body>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/pc/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="${s.base}/pc/js/swiper.min.js" type="text/x-javascript"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/pc/js/base.js" type="text/x-javascript"></script>
<script src="${s.base}/pc/js/cropbox.js" type="text/x-javascript"></script>
<script>
    var base64File="";
    layui.use(['jquery', 'dialog', 'baseutil'], function () {
        var $ = layui.jquery,
            dialog = layui.dialog,
            baseutil = layui.baseutil;

        var headLogo = '${sysUser.headLogo}';

        $('.user-txt-list li').bind('click', function () {
            if ($(this).index() === 0) {
                window.open('/web/personalEdit', '_self')
            } else if ($(this).index() === 1) {
                dialog.confirm("确定要退出吗？", function () {
                    baseutil.AjaxGetMark("/webExit", "", function () {
                        window.location.href = "/web/index";
                    });
                });
            }
        });

        $('.peo-notice-mid ul li').bind('click', function () {
            var id = $(this).attr("id");
            if (isNotBlank(id)) {
                window.open('/web/noticeDetail?id=' + $(this).attr("id"), '_blank')
            }
        });

        $('#editBtnUpload').bind('click', function () {
            var formData = new FormData();
            //formData.append("file", document.getElementById("upload-file").files[0]);
            formData.append("imgBase64",encodeURIComponent(base64File));
            formData.append("catalog", "sys/user");
            $.ajax({
                url: "/sysFile/uploadImageData",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.code === 0) {
                        $(".cytx-tc").hide();
                        headLogo = data.data.objectId;
                        $('.peo-Avatar img').attr('src', '/sysFile/showFileByPath?path=' + data.data.path);
                    }
                }
            });
        });

        $('#editbtn').bind('click', function () {
            var name = $('#name').val();
            var phone = $('#phone').val();
            if (isBlank(name)) {
                dialog.msg('请输入用户名');
                return false;
            }
            if (isBlank(phone)) {
                dialog.msg('请输入手机号');
                return false;
            } else {
                var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!reg.test(phone)) {
                    dialog.msg('请输入正确的手机号');
                    return false;
                }
            }
            var data = {id: '${sysUser.id}', name: name, loginName: '${sysUser.loginName}', headLogo: headLogo, phone: phone};
            baseutil.post("/sysUser/update", data, function (result) {
                dialog.msg(result.msg);
                window.location.reload();
            });
        });
    });

    $(function () {
        var swiper1 = new Swiper('#swiper1', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });

        var swiper2 = new Swiper('#swiper2', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });

        var swiper3 = new Swiper('#swiper3', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: true,
            initialSlide: 2,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });

        var swiper4 = new Swiper('#swiper4', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: true,
            initialSlide: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });

        $(".we-head-nav ul li").bind("click", function () {
            $(".we-head-nav ul li").removeClass("checked");
            $(this).addClass("checked");
        });

        $(".we-head-logined").mouseover(function () {
            $(".user-txt-list").show();
            $(this).find(".user-updown").addClass("Rotate180")
        });

        $(".we-head-logined").mouseout(function () {
            $(".user-txt-list").hide();
            $(this).find(".user-updown").removeClass("Rotate180")
        });

        $("#cancel-cj").bind("click", function () {
            $(".cytx-tc").hide();
        });

        $(".editData-btn").bind("click", function () {
            $(".cytx-tc").show();
        });
    });

    $(window).load(function () {
        var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: 'img/avatar.jpg'
            };
        var cropper = $('.imageBox').cropbox(options);
        $('#upload-file').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            };
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        });
        $('#btnCrop').on('click', function () {
            var img = cropper.getDataURL();
            base64File=img;
            $('.cropped').html('');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        });
        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        });
        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        });
    });
</script>
</html>